<template>
  <HelloWorld :layoutArr="layoutArr"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: { HelloWorld },
};
</script>
<script setup>
import { ref } from "vue";
// const base = {
//   x: 0,
//   y: 0,
//   w: 100,
//   h: 100,

//   print(index, event) {
//     console.log(index, event);

//     event = {
//       x: event.x || layoutArr.value[index].x,
//       y: event.y || layoutArr.value[index].y,
//       w: event.w || layoutArr.value[index].w,
//       h: event.h || layoutArr.value[index].h,
//       name: "practice1",
//       name: "practice2",
//       name: "practice3",
//     };
//     localStorage.setItem("position" + index, JSON.stringify(event));
//   },
// };
// const layoutArr = ref(new Array(1));
// layoutArr.value.fill(base);
// console.log(layoutArr);

// layoutArr.value.forEach((layout, index) => {
//   let pos = localStorage.getItem("position" + index);
//   if (pos) {
//     pos = JSON.parse(pos);
//     layoutArr.value[index] = {
//       ...pos,
//       print: layoutArr.value[index].print,
//     };
//   }
// });
const layoutArr = ref([
  {
    x: 0,
    y: 0,
    w: 500,
    h: 500,
    name: "practice1",
    print() {},
    options: {
      tableData: [
        {
          date: "2016-05-06",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },

        {
          date: "2016-05-06",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-07",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
      style: "",
      height: 300,
      optionsArr: [
        {
          prop: "address",
          label: "Address",
          width: 180,
        },
        {
          prop: "data",
          label: "Data",
          width: 180,
          slot(scope) {
            return "<div>这是一个作用域插槽${scope.row.name}</div>";
          },
        },
        {
          prop: "name",
          label: "Nmae",
          width: 180,
        },
      ],
    },
  },
  {
    x: 0,
    y: 0,
    w: 100,
    h: 100,
    name: "practice2",
    print() {},
    options: {
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          areaStyle: {},
        },
      ],
    },
  },
  {
    x: 0,
    y: 0,
    w: 500,
    h: 500,
    name: "practice2",
    print() {},
    options: {
      title: {
        text: "ECharts 示例",
      },
      tooltip: {},
      xAxis: {
        data: ["a", "b", "c", "d", "e", "f"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    },
  },
  {
    x: 0,
    y: 0,
    w: 500,
    h: 500,
    name: "practice3",
    print() {},
    options: {
      background: true,
      layout: "prev, pager, next",
      total: 1000,
    },
  },
  {
    x: 0,
    y: 0,
    w: 500,
    h: 500,
    name: "practice4",
    print() {},
    options: {
      type: "dashboard",
    },
  },
  {
    x: 500,
    y: 200,
    w: 600,
    h: 300,
    name: "practice5",
    print() {},
    options: {
      percentage: 50,
    },
  },
]);
</script>

<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}
</style>
